<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div id="app">
        <button id="btnget">GET</buttonid>

        <button id="btnpost" >POST</button>
        <button id="btnjsonp" >JSONP</button>
    </div>
   

    <script>
  /*       const vue=new Vue({
            el:'#app',
            data:{
                name:'zs',
                age:20
            },
            methods:{
                
                btnget:function(){
                    var that=this;
                    axios.get("http:127.0.0.1/api/get?name='zs'")
                .then(function(res){
                    console.log(res)

                },function(err){
                    console.log(err)
                })
                }
            }
        }) */
        $(function(){
            //1.测试GET接口
            $('#btnget').on('click',function(){
                $.ajax({
                    type:'GET',
                    url:'http:127.0.0.1/api/get',
                    data:{name:'zs',age:20},
                    success:function(res){
                        console.log(res) 
                    }
                    
            })
            })
        })
            //2.测试POST接口
            $(function(){
            //1.测试GET接口
            $('#btnpost').on('click',function(){
                $.ajax({
                    type:'POST',
                    url:'http:127.0.0.1/api/post',
                    data:{bookname:'水浒',age:20},
                    success:function(res){
                        console.log(res)
                    }
                    
            })
            })
        })

        //3.为JSONP按钮绑定点击事件
        $(function(){
            //1.测试GET接口
            $('#btnjsonp').on('click',function(){
                $.ajax({
                    type:'GET',
                    url:'http:127.0.0.1/api/jsonp',
                    dataType:'jsonp',
                    success:function(res){
                        console.log(res)
                    }
                    
            })
            })
        })
        
    </script>
</body>
</html>